<template>
  <div>
    <div class="insideBox">
      <div class="title">用户登录</div>
      <Form ref="formInline" :model="formInline" :rules="ruleInline">
        <FormItem prop="userName">
          <Input type="text" v-model="formInline.userName" placeholder="用户名">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="password">
          <Input
            type="password"
            v-model="formInline.password"
            placeholder="密码"
          >
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
          </Input>
        </FormItem>
        <FormItem prop="code">
          <Input v-model="formInline.code" placeholder="验证码">
            <div slot="append">
              <img
                :src="`data:image/jpg;base64,${codeUrl}`"
                @click="createCode"
                class="codeBox"
              />
            </div>
          </Input>
        </FormItem>
        <FormItem>
          <RadioGroup v-model="userType">
            <Radio label="2">
              <span>用户登录</span>
            </Radio>
            <Radio label="3">
              <span>教练登录</span>
            </Radio>
          </RadioGroup>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formInline')"
            >登录</Button
          >
          <Button @click="openPage()">前往注册</Button>
        </FormItem>
      </Form>
    </div>
  </div>
</template>
<script>
import { createCodeAPi } from "../api/api";
import { setToken } from "@/utils/cache/cookies";
export default {
  data() {
    return {
      userType: '2',
      formInline: {
        userName: "",
        password: "",
        code: "",
        secret: ""
      },
      ruleInline: {
        userName: [{ required: true, message: "请输入", trigger: "blur" }],
        password: [{ required: true, message: "请输入", trigger: "blur" }]
      },
      codeUrl: ""
    };
  },
  created() {
    this.createCode();
  },
  methods: {
    createCode() {
      createCodeAPi().then(res => {
        this.codeUrl = res.data.imgContent;
        this.formInline.secret = res.data.secret;
      });
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.$store.dispatch("Login", { userInfo: this.formInline, userType: this.userType }).then(res => {
            setToken(res.token);
            this.$router.push("/");
          }).catch(() => {
            this.createCode();
          })
        } else {
          this.$Message.error("Fail!");
        }
      });
    },
    openPage() {
      this.$router.push("/register");
    }
  }
};
</script>
<style scoped>
.insideBox {
  width: 400px;
  height: 450px;
  background-color: #fff;
  border: 1px solid #333;
  border-radius: 10px;
  padding: 50px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

.title {
  font-size: 24px;
  margin: 20px;
  text-align: center;
}

.codeBox {
  width: 100px;
  height: 40px;
  border-left: 0px;
  user-select: none;
  cursor: pointer;
  text-align: center;
}
</style>
